<template>
  <div>
    <el-card>
      <Categoryselect :show="show" @getCategorys="getCategorys"></Categoryselect>
    </el-card>
    <el-card style="margin: 10px 0">
      <div v-show="scene == 0">
        <el-button type="primary" style="margin: 10px 0" @click="addSpu" :disabled="!categoryIds.category3Id">+添加SPU
        </el-button>
        <el-table style="width: 100%" :data="records">
          <el-table-column type="index" label="序号" width="80" align="center">
          </el-table-column>
          <el-table-column prop="spuName" label="SPU名称" width="width">
          </el-table-column>
          <el-table-column prop="description" label="SPU描述" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-button type="success" icon="el-icon-plus" circle @click="addSkuAttrList(row)"></el-button>
              <el-button type="warning" icon="el-icon-edit" circle @click="addSpuAttrList(row)"></el-button>
              <el-button type="info" icon="el-icon-warning" circle @click="getSkuList(row)"></el-button>
              <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red"
                :title="`确定删除${row.spuName}吗？`" @onConfirm="deleteSpu(row)" style="margin:0 10px">
                <el-button type="danger" slot="reference" icon="el-icon-delete" circle>
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="getSpuList"
          :current-page="2" :page-sizes="[3, 5, 7, 9]" :page-size="10"
          layout="prev, pager, next, jumper,->,total, sizes" :total="total">
        </el-pagination>
      </div>
      <SkuForm v-show="scene == 1" ref="sku"  @cancelSpuForm1="changeScene" ></SkuForm>
      <SpuForm v-show="scene == 2" @cancelSpuForm="changeScene" ref="spu"></SpuForm>
    </el-card>
    <el-dialog :title="`${sku.spuName}的列表`" :visible.sync="dialogTableVisible">
  <el-table :data="gridData">
    <el-table-column property="skuName" label="名称" width="220"></el-table-column>
    <el-table-column property="price" label="价格" width="200"></el-table-column>
    <el-table-column property="weight" label="重量" width="200"></el-table-column>
    <el-table-column  label="默认图片">
        <template slot-scope="{row,$index}"> 
           <img :src="row.skuDefaultImg" alt="" style="height:80px">
        </template>
    </el-table-column>
  </el-table>
</el-dialog>
  </div>
</template>

<script>
import SpuForm from "@/views/product/Spu-compoment/spuForm";
import SkuForm from "@/views/product/Spu-compoment/skuForm";
export default {
  name: "Spu",
  components: { SpuForm, SkuForm },
  data() {
    return {
      show: true,
      categoryIds: [],
      page: 1,
      limit: 6,
      total: 0,
      records: [],
      scene: 0,
      visible: false,
      dialogTableVisible:false,
      gridData:[],
      sku:[]
    };
  },
  methods: {
    getCategorys(categoryIds) {
      this.categoryIds = categoryIds;
      console.log(categoryIds);
      this.getSpuList();
    },
    async getSpuList(pages = 1) {
      this.page = pages;
      const { category3Id } = this.categoryIds;
      const { page, limit } = this;
      let result = await this.$API.spu.reqSpuList(page, limit, category3Id);
      console.log(result);
      if (result.code == 200) {
        this.records = result.data.records;
        this.total = result.data.total;
      }
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getSpuList();
    },
    addSpu() {
      this.scene = 2;
      const { category3Id } = this.categoryIds;
      this.$refs.spu.initSpuData1(category3Id);
    },
    addSpuAttrList(row) {
      this.scene = 2;
      this.$refs.spu.initSpuData(row);
    },
    addSkuAttrList(row) {
      this.scene = 1;
      const { category1Id, category2Id } = this.categoryIds;
      this.$refs.sku.initSkuData(category1Id, category2Id, row)

    },
    changeScene(scene ) {
      this.scene = scene;
      this.getSpuList();
      // if (flag == "修改") {
      //   this.getSpuList(this.page);
      // } else {
      //   this.getSpuList();
      // }
    },
    updateScene(scene){
      this.scene=scene
    },
    async deleteSpu(row) {
      let result = await this.$API.spu.reqDeleteSpu(row.id);
      if (result.code == 200) {
        this.$message({ type: "success", message: "删除成功" });
        this.getSpuList(this.records.length > 1 ? this.page : this.page - 1);
      }
    },
   async getSkuList(row){
      this.dialogTableVisible = true
      this.sku=row
      console.log(row);
     let result=await this.$API.sku.reqSkuList(row.id)
     if(result.code==200){
      this.gridData=result.data
     }
    }
  },
};
</script>

<style>
</style>